<template>
<div>
    <div class="flex items-center justify-between">
        <div class="box flex justify-between">
            <div class="flex items-center">
                <img src="@/assets/icon/staff.png" class="w-[31px] h-[33px]">
                <div class="ml-[10px]">職員數量:</div>
            </div>
            <div  class="text-3xl font-600" style="color:#F72C25">{{ list.teacher || 0 }}</div>
        </div>
        <div class="box  flex justify-between">
            <div class="flex items-center">
                <img src="@/assets/icon/student.png">
                <div class="ml-[10px]">學生數量:</div>
            </div>
            <div class="text-3xl font-600" style="color:#50BC58">{{ list.student || 0}}</div>

        </div>
        <div class="box flex justify-between">
            <div class="flex items-center">
                <img src="@/assets/icon/invoice.png">
                <div class="ml-[10px]">發票數量:</div>
            </div>
            <div class="text-3xl font-600" style="color:#5995ED">{{ list.invoice || 0}}</div>
        </div>
    </div>
</div>
</template>

<script setup>
import { reactive, ref } from 'vue' 
import {panel} from '@/http/index.js'
const form = reactive({
    school_id:localStorage.getItem('school_id')
})
const list = ref({})
const init = async()=>{
    const data = await panel(form)
    if (data.code == 200) {
        list.value = data.data
    }
}
defineExpose({
    init
})
</script>

<style lang='less'  scoped>
.box{
    width: 30%;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
    padding: 23px 76px 23px 46px;
}
.box:hover {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
}

</style>